<!-- 标线 -->
<template>
  <div class="marking-box">
    <div
      :style="getStyleTop"
      class="item item-row"></div>
    <div
      :style="getStyleLeft"
      class="item item-column"></div>
  </div>
</template>

<script >
import { mapState } from "vuex"
import { getComponentByKey, getComponentListByKeys, getOffsetByCanvas, getParentChildrenByKey } from "../../../lib/utils"
import { mouseStatus } from "../../../lib/const"

const minDistance = 1.5

export default {
  data() {
    return {
      list: [
        {
          class: "row",
          name: "top",
        },
        {
          class: "column",
          name: "left"
        }
      ],

    }
  },
  props: {


  },
  components: {

  },
  computed: {
    // ...mapState(["selectedComponent"]),
    ...mapState('lowCode', {
      selectedComponent: state => state.selectedComponent,
    }),
    getStyleTop(){
      // if(this.$store.state.lowCode.mouseState !== mouseStatus.ADD_DRAG){
      //   return {}
      // }
      const type = "top"
      const {distance, typeValue, value} = this.getDistanceStyle(type)

      const isAdsorbent = distance < minDistance
      if (isAdsorbent){
        this.$store.commit("lowCode/setWrapStyle",{
          [type]: typeValue
        })
      }
      return {
        display: isAdsorbent ? "block" : "none",
        [type]: `${value}px`
      }
    },
    getStyleLeft(){
      // if(this.$store.state.lowCode.mouseState !== mouseStatus.ADD_DRAG){
      //   return {}
      // }
      const type = "left"
      const {distance, value, typeValue} = this.getDistanceStyle(type)
      const isAdsorbent = distance < minDistance
      if (isAdsorbent){
        this.$store.commit("lowCode/setWrapStyle",{
          [type]: typeValue
        })
      }
      return {
        display: isAdsorbent ? "block" : "none",
        [type]: `${value}px`
      }
    }
  },
  methods: {
    getDistanceStyle(type){
      const typeConfig = {
        left: {
          attr: "left",
          diffAttr: "width"
        },
        top: {
          attr: "top",
          diffAttr: "height"
        }
      }


      const { canvasComponentList, snapshotIndex, mouseState, multipleKeys } = this.$store.state.lowCode
      if (multipleKeys.length === 0){
        return {}
      }
      const selectedComponent = this.$store.state.lowCode.selectedComponent.key ? this.$store.state.lowCode.selectedComponent : getComponentByKey(canvasComponentList ,multipleKeys[0])

      // 只有当拖拽时，才显示标线
      if (mouseState === mouseStatus.DEFAULT){
        return {}
      }

      if (snapshotIndex === -1 || canvasComponentList.length < 2 || !selectedComponent.key){
        return {}
      }
      const {
        parent
      } = getParentChildrenByKey(canvasComponentList, selectedComponent.key)

      // 只比较同级节点和非选中节点
      const componentList = parent.filter(item => item.key !== selectedComponent.key).filter(item => !multipleKeys.includes(item.key))
      // 获取当前选中组件与其他组件之间的距离
      // 距离有6种,即与上边\中线\下边,左边\中线\右边
      // 根据type,只用计算自己三条边与3条边的距离,再取最小值
      // 获取左边位置
      const getLeft = component => component?.style[type]
      // 获取中边位置
      const getCenter = component => component.style[type] + component.style[typeConfig[type].diffAttr] / 2
      // 获取右边位置
      const getRight = component => component.style[type] + component.style[typeConfig[type].diffAttr]
      // 当前组件左边位置
      const selectLeft = getLeft(selectedComponent)
      // 当前组件中边位置
      const selectCenter = getCenter(selectedComponent)
      // 当前组件右边位置
      const selectRight = getRight(selectedComponent)
      // 自己最左边或者最上边与3边比较
      const distances1 = componentList.map(item => Math.abs(selectLeft - getLeft(item)))
      const distances2 = componentList.map(item => Math.abs(selectLeft - getCenter(item)))
      const distances3 = componentList.map(item => Math.abs(selectLeft - getRight(item)))
      // 自己中线与3边比较
      const distances4 = componentList.map(item => Math.abs(selectCenter - getLeft(item)))
      const distances5 = componentList.map(item => Math.abs(selectCenter - getCenter(item)))
      const distances6 = componentList.map(item => Math.abs(selectCenter - getRight(item)))
      // 自己右边或者最下边与3边比较
      const distances7 = componentList.map(item => Math.abs(selectRight - getLeft(item)))
      const distances8 = componentList.map(item => Math.abs(selectRight - getCenter(item)))
      const distances9 = componentList.map(item => Math.abs(selectRight - getRight(item)))

      const getMin = nums => Math.min(...nums)
      const mins = [
        getMin(distances1),
        getMin(distances2),
        getMin(distances3),
        getMin(distances4),
        getMin(distances5),
        getMin(distances6),
        getMin(distances7),
        getMin(distances8),
        getMin(distances9)
      ]
      const min = getMin(mins)
      let minDistanceComponent
      let value, typeValue
      const getOffset = key => {
        const {
          offsetTop,
          offsetLeft
        } = getOffsetByCanvas(document.getElementById(key))
        return {
          left: offsetLeft,
          top: offsetTop,
        }
      }
      let data
      if (min >= 2){
        return {

        }
      }
      else {
        switch (mins.indexOf(min)) {
          case 0: // left - left
            minDistanceComponent = componentList[distances1.indexOf(min)]
            data = getOffset(minDistanceComponent.key)
            typeValue = getLeft(minDistanceComponent)
            value = data[type]
            break
          case 1: // left - center
            minDistanceComponent = componentList[distances2.indexOf(min)]
            data = getOffset(minDistanceComponent.key)
            typeValue = getCenter(minDistanceComponent)
            value = data[type] + minDistanceComponent.style[typeConfig[type].diffAttr] / 2
            break
          case 2: // left - right
            minDistanceComponent = componentList[distances3.indexOf(min)]
            data = getOffset(minDistanceComponent.key)
            typeValue = getRight(minDistanceComponent)
            value = data[type] + minDistanceComponent.style[typeConfig[type].diffAttr]
            break
          case 3: // center - left
            minDistanceComponent = componentList[distances4.indexOf(min)]
            data = getOffset(minDistanceComponent.key)
            typeValue = getLeft(minDistanceComponent) - selectedComponent.style[typeConfig[type].diffAttr] / 2
            value = data[type]
            break
          case 4: // center - center
            minDistanceComponent = componentList[distances5.indexOf(min)]
            data = getOffset(minDistanceComponent.key)
            typeValue = getCenter(minDistanceComponent) - selectedComponent.style[typeConfig[type].diffAttr] / 2
            value = data[type] + minDistanceComponent.style[typeConfig[type].diffAttr] / 2
            break
          case 5: // center - right
            minDistanceComponent = componentList[distances6.indexOf(min)]
            data = getOffset(minDistanceComponent.key)
            typeValue = getRight(minDistanceComponent) - selectedComponent.style[typeConfig[type].diffAttr] / 2
            value = data[type] + minDistanceComponent.style[typeConfig[type].diffAttr]
            break
          case 6: // right - left
            minDistanceComponent = componentList[distances7.indexOf(min)]
            data = getOffset(minDistanceComponent.key)
            typeValue = getLeft(minDistanceComponent) - selectedComponent.style[typeConfig[type].diffAttr]
            value = data[type]
            break
          case 7: // right - center
            minDistanceComponent = componentList[distances8.indexOf(min)]
            data = getOffset(minDistanceComponent.key)
            typeValue = getCenter(minDistanceComponent) - selectedComponent.style[typeConfig[type].diffAttr]
            value = data[type] + minDistanceComponent.style[typeConfig[type].diffAttr] / 2
            break
          case 8: // right - right
            minDistanceComponent = componentList[distances9.indexOf(min)]
            data = getOffset(minDistanceComponent.key)
            typeValue = getRight(minDistanceComponent) - selectedComponent.style[typeConfig[type].diffAttr]
            value = data[type] + minDistanceComponent.style[typeConfig[type].diffAttr]
            break
          default:
            return {}
        }
        return {
          distance: min,
          value,
          typeValue,
        }
      }
    },
    getDistance(){

    },



  }

}

</script>

<style lang="less" scoped>
  @import url("./index.less");
</style>

